<template>
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="username" label="用户" width="120px">
        </el-table-column>
        <el-table-column label="权限" prop="power">
            <template #default="scope">
                <el-tag class="ml-2" v-show="scope.row.power.includes('所有权限')">所有权限</el-tag>
                <el-tag class="ml-2"
                    v-show="!scope.row.power.includes('所有权限') && scope.row.power.includes('成员变更')">用户权限管理</el-tag>
                <el-tag class="ml-2" v-show="!scope.row.power.includes('所有权限') && scope.row.power.includes('用户权限管理')">
                    用户权限管理</el-tag>
                <el-tag class="ml-2"
                    v-show="!scope.row.power.includes('所有权限') && scope.row.power.includes('住户信息修改')">住户信息修改</el-tag>
                <el-tag class="ml-2" type="info" v-show="scope.row.power.length == 0">暂无权限</el-tag>
            </template>

        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <PermissionDialog @reGetList="getMessage"></PermissionDialog>
</template>
<script setup lang="ts">
    import { onMounted,ref } from "vue";
    import { useStore } from "vuex";
    import link from '../../api/link.js'
    import PermissionDialog from '../../components/PermissionDialog.vue'
    import { ElMessage,ElMessageBox } from "element-plus";


    
    const store = useStore()
    const tableData = ref([])

    const filterTag = (value: string, row: any) => {
        return row.tag === value
    }

    onMounted(() => {
        getMessage()
    })

    // 获取用户权限
    const getMessage = () => {
        link('/register').then (res => {
            console.log(res.data)
            tableData.value = res.data
        })
    }

    // 编辑信息
    const handleEdit = (row:any) => {
        store.commit('changePerDialog')
        store.commit('showPerEdit',row)
    }

    // 删除信息
    const handleDelete = (row:any) => {
        ElMessageBox.confirm(
            '确定删除该用户吗？',
            {
                confirmButtonText:'确定',
                cancelButtonText:'取消',
            }
        ).then(() => {
            link(`/register/${row.id}`,'delete').then(res => {
                if (res.status === 200) {
                    ElMessage({
                        message:'删除成功'
                    })
                    getMessage()
                }else{
                    ElMessage({
                        message:'删除失败'
                    })
                }
            })
            getMessage()
        }).catch(() => {
            ElMessage({
                type:'info',
                message:'已取消'
            })
        })
    }
</script>
<style lang="scss" scoped>
    
</style>